<script lang="ts" setup>
import { MessagePlugin, type FormProps } from 'tdesign-vue-next'
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const router = useRouter()
const formRef = ref()
const loadingRef = ref(false)
const fm: FormProps['data'] = reactive({
  email: '',
  password: ''
})
const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功')
}
const onSubmit: FormProps['onSubmit'] = async ({ validateResult, firstError }) => {
  loadingRef.value = true
  if (validateResult === true) {
    const res = await userStore.login({
      email: fm.email,
      password: fm.password,
      type: 1
    })
    if (res) {
      MessagePlugin.success('登录成功')
      router.push('/')
    }
  } else {
    console.log('Validate Errors: ', firstError, validateResult)
    MessagePlugin.warning(firstError!)
  }
  loadingRef.value = false
}
</script>

<template>
  <div class="d-flex logo h-100 justify-center align-center">
    <div class="" style="width: 350px">
      <div class="text-h4 mb-4">
        <div class="text-h6">登录到</div>
        <div class="font-weight-bold">摸云v2·后台管理系统</div>
      </div>

      <t-form
        ref="formRef"
        :data="fm"
        :colon="true"
        :label-width="0"
        @reset="onReset"
        @submit="onSubmit"
      >
        <t-form-item name="account">
          <t-input v-model="fm.email" clearable placeholder="请输入邮箱号">
            <template #prefix-icon>
              <desktop-icon />
            </template>
          </t-input>
        </t-form-item>

        <t-form-item name="password">
          <t-input v-model="fm.password" type="password" clearable placeholder="请输入密码">
            <template #prefix-icon>
              <lock-on-icon />
            </template>
          </t-input>
        </t-form-item>

        <t-form-item>
          <t-button theme="primary" type="submit" :loading="loadingRef" block>登录</t-button>
        </t-form-item>
      </t-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  background-image: url('/public/logo.svg');
  background-size: 50% 55%;
  background-position: top center;
}
</style>
